<template>
  <div class="permission">
    <div class="desc">
      <div class="left">
        <ep-title :title="this.title"></ep-title>
        <ep-count
            :size="size"
            style="margin-left: 15px"
            text="数据量"
            :count="this.dataCount"
            unit="条"
        ></ep-count>
        <ep-time
            :size="size"
            style="margin-left: 15px"
            text="上次更新时间："
            :timer="this.lastUpdateTime"
        ></ep-time>
      </div>
    </div>
    <div class="operate">
      <div>
        <a-select
            :size="size"
            style="width: 9vw;"
            v-model="queryInfo.c0303"
            @change="c0303Change"
        >
          <a-select-option
              v-for="(item, index) in this.dictData.c0303"
              :value="item.dictKey"
              :key="index"
          >{{ item.dictValue }}</a-select-option
          >
        </a-select>
        <div style="flex: 0 0 auto">
          <ep-search
              v-model="queryInfo.b0102"
              :size="size"
              style="margin-left: 15px"
              placeholder="请输入点位名称"
              enter-button="chaxun "
              @search="
              () => {
                this.listQuery();
              }
            "
          ></ep-search>
        </div>
        <ep-button
            :size="size"
            style="margin-left: 15px"
            icon="refresh.svg"
            @click="
            () => {
              this.flushPage();
            }
          "
        ></ep-button>
        <a-tree-select
            :size="size"
            placeholder="请选择管理区域(可多选)"
            ref="taskArea"
            allowClear
            tree-checkable
            style="margin-left: 15px;width:18vw"
            v-model="queryInfo.manageAreas"
            :show-checked-strategy="SHOW_PARENT"
            :treeData="taskAreaTree"
            @change="manageAreaChange()"
        />
        <ep-button
            :size="size"
            style="margin-left: 15px"
            @click="
            () => {
              this.allotTaskBatch();
            }
          "
        >批量分配人员</ep-button
        >
      </div>

      <div>
        <column-manage :column.sync="tableColumn" @change="columnChange"></column-manage>
        <ep-button
            :size="size"
            style="margin-left: 15px"
            icon="export.svg"
            @click="
            () => {
              this.exportExcel();
            }
          "
        >导出</ep-button
        >
      </div>
    </div>

    <div style="margin-top: 10px"></div>

    <a-modal
        title="分配处置员"
        centered
        style="top: 20px"
        width="65%"
        destroyOnClose
        v-model="allotVisible"
        cancelText="关闭"
        okText="保存"
        @ok="allotHandleOk"
        @cancel="allotHandleCancel"
    >

      <disposal-ps-allot
          ref="AllotTaskForm"
          @handleCancel="allotHandleCancel"
          @showOrHide="allotShowOrHide"
          :list-query="listQuery">
        <template slot="footer">
          <ep-button @click="allotHandleCancel">关闭</ep-button>
          <ep-button @click="allotHandleOk" type="save">保存</ep-button>
        </template>
      </disposal-ps-allot>
    </a-modal>

    <div class="ep-table">
      <zh-table
          ref="tableList"
          rowId="roleId"
          :url = "tableUrl"
          height="auto"
          :columns="tableColumn"
          :data = "tableData"
          :total.sync="dataCount"
          @checkbox-change="selectChangeEvent"
          @checkbox-all="selectAllEvent"
      >
        <template #filter="{ $panel, column }">
          <input
              type="type"
              v-for="(option, index) in column.filters"
              :key="index"
              v-model="option.data"
              @input="$panel.changeOption($event, true, option)"
          />
        </template>
        <template #operate="{ row }">
          <div class="alert-message">
            <i class="fa fa-exclamation-circle alert-message-icon"></i>
            <span class="alert-message-content">
              <ep-button size="small" type="rank" @click="allotTask(row)"
              >处置人员分配</ep-button
              >
            </span>
          </div>
        </template>
      </zh-table>
    </div>
  </div>
</template>

<script>
import modal from "ant-design-vue/es/modal";
const SHOW_PARENT = TreeSelect.SHOW_PARENT;
import {
  getPermissionParams,
  disposalManAllotListQuery,
  disposalInitData,
} from "@/services/system/whdngxlApi";
import { getBatchDict } from "@/services/system/api";
import PatrolPsAllot from "@/pages/system/form/PatrolPsAllot";
import { TreeSelect } from "ant-design-vue";
import EpButton from "@/components/assembly/button";
import ZhTable from "@/components/zh-table/ZhTable";
import ColumnManage from "@/components/assembly/columnManage";
import UnmovableRelics from "@/pages/whdngxl/TasksCheckManage/UnmovableRelics";
import {mapGetters} from "vuex";
import DisposalPsAllot from "@/pages/system/form/DisposalPsAllot";
export default {
  name: "PatrolPsConfig",
  components: {
    DisposalPsAllot,
    ColumnManage,
    EpButton,
    PatrolPsAllot,
    ZhTable,
  },
  computed: {
    ...mapGetters(['size']),
  },
  data() {
    return {
      dictData: {
        c0303: [],
        b0104: [],
      },
      filtersData: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      // 分页参数
      tablePage: {
        total: 0,
        currentPage: 1,
        pageNum: 1,
        pageSize: 200,
      },
      tableUrl: disposalManAllotListQuery,
      tableColumn: [
        { type: "checkbox", width: 50, fixed: "left", visible: true },
        {
          type: "seq",
          width: 80,
          fixed: "left",
          align: "center",
          title: "序号",
          visible: true,
        },
        {
          field: "b0101",
          title: "点位ID",
          visible: false,
          align: "center",
          width: 150,
        },
        {
          field: "b0103",
          title: "编号",
          align: "center",
          width: 100,
          visible: true,
        },
        {
          field: "b0102",
          title: "名称",
          align: "center",
          width: 150,
          visible: true,
        },
        {
          field: "b0129Name",
          title: "处置级别",
          align: "center",
          filters: [],
          width: 150,
          visible: true,
        },
        {
          field: "b0104Name",
          title: "古系列类别",
          align: "center",
          filters: [],
          width: 150,
          visible: true,
        },
        {
          field: "b0105Name",
          title: "文保级别",
          align: "center",
          filters: [],
          width: 150,
          visible: true,
        },
        {
          field: "b0106Name",
          title: "时代",
          align: "center",
          filters: [],
          width: 150,
          visible: true,
        },
        {
          field: "manageArea",
          title: "管理区域",
          align: "center",
          width: 250,
          visible: true,
        },
        {
          field: "b0113Name",
          title: "是否核销",
          align: "center",
          filters: [],
          width: 120,
          visible: true,
        },
        {
          field: "b0114Name",
          title: "是否安全",
          align: "center",
          filters: [],
          width: 120,
          visible: true,
        },
        {
          field: "b0115Name",
          title: "是否划定保护双线",
          align: "center",
          filters: [],
          width: 180,
          visible: true,
        },
        {
          field: "b0109",
          title: "地址",
          align: "center",
          width: 200,
          visible: true,
        },
        {
          field: "b0117Name",
          title: "省级文保类别",
          align: "center",
          filters: [],
          width: 150,
          visible: true,
        },
        {
          field: "b0118Name",
          title: "省级文保子类",
          align: "center",
          filters: [],
          width: 150,
          visible: true,
        },
        {
          field: "b0121",
          title: "开放时间",
          sortable: true,
          align: "center",
          width: 120,
          visible: true,
        },
        {
          field: "dutyLeader",
          title: "责任领导",
          align: "center",
          fixed: "right",
          width: 120,
          visible: true,
          filters: [{ data: "" }],
          filterMethod: this.filterDutyLeaderMethod,
          slots: {
            // 使用插槽模板渲染
            filter: "filter",
          },
        },
        {
          field: "departmentLeader",
          title: "科室领导",
          align: "center",
          fixed: "right",
          width: 120,
          visible: true,
          filters: [{ data: "" }],
          filterMethod: this.filterDepartmentLeaderMethod,
          slots: {
            // 使用插槽模板渲染
            filter: "filter",
          },
        },
        {
          field: "disposalMan",
          title: "处置员",
          align: "center",
          fixed: "right",
          width: 120,
          visible: true,
          filters: [{ data: "" }],
          filterMethod: this.filterDisposalManMethod,
          slots: {
            // 使用插槽模板渲染
            filter: "filter",
          },
        },
        {
          field: "operate",
          title: "操作",
          fixed: "right",
          align: "center",
          width: 130,
          slots: {
            // 使用插槽模板渲染
            default: "operate",
          },
          visible: true,
        },
      ],
      rules: {},
      tableData: [],
      visible: false,
      allotVisible: false,
      //表头
      toolbarConfig: {
        custom: true,
        slots: {},
      },
      queryInfo: {
        c0303: "",
        b0102: "",
        manageAreas: undefined,
      },
      advanced: false,
      title:'',
      dataCount: "0", //数据量
      lastUpdateTime: "", //上次更新时间
      selectedRowKeys: [] /*table选中keys*/,
      selectionRows: [] /*table选中records*/,
      row: {},
      taskAreaTree: [],
      SHOW_PARENT,
      fieldVisible: false,
      columns: [],
    };
  },
  mounted() {},
  created() {
    //获取任务范围
    this.$http.post(getPermissionParams, {}).then((res) => {
      const data = res.result;
      this.taskAreaTree = data.orgTreeData;
    });
    // 数据初始化
    this.$nextTick(() => {
      this.init();
    });
  },
  methods: {
    manageAreaChange() {
      this.listQuery();
    },
    init() {
      const params2 = {};
      params2.dictFields =
          "c0303,b0104,b0105,b0106,b0113,b0114,b0115,b0117,b0118,b0129";
      this.$http.post(getBatchDict, params2).then((res) => {
        this.dictData = res.result;
        this.queryInfo.c0303 = this.dictData.c0303[0].dictKey;
        //获取筛选数据
        UnmovableRelics.methods.getFiltersData(this, "tableList");
      });
      this.queryInfo.c0303 = "1"
      //初始化获取上次更新时间
      this.getInitData();
      this.listQuery();
    },
    c0303Change() {
      this.getInitData();
      this.listQuery();
    },
    //获取初始化数据
    getInitData() {
      const params = {};
      params.c0303 = this.queryInfo.c0303
      setTimeout(() => {
        this.$http
            .post(disposalInitData, params)
            .then((res) => {
              if (res.result) {
                this.lastUpdateTime = res.result.lastUpdateTime;
                this.title = res.result.c0303Name
              }
            })
            .catch((error) => {
              console.log(JSON.stringify(error));
              this.$message.error("获取初始化数据失败");
            })
            .finally(() => {});
      }, 50);
    },
    handleOk() {},
    handleCancel() {
      this.visible = false;
    },
    showOrHide() {
      this.visible = !this.visible;
    },
    allotHandleOk() {
      this.$nextTick(() => {
        let param = [];
        if (this.row.b0101) {
          param.push(this.row);
        } else {
          param = this.selectionRows;
        }
        if (param.length > 0) {
          this.$refs.AllotTaskForm.allotTaskBatch(param);
        } else {
          this.$message.warning("无可保存数据!");
        }
      });
    },
    allotHandleCancel() {
      this.allotVisible = false;
    },
    allotShowOrHide() {
      this.allotVisible = !this.allotVisible;
    },
    listQuery() {
      //手动清空用户的选择
      this.$refs.tableList.clearCheckboxRow();
      //手动清空用户保留选中的行数据
      this.$refs.tableList.clearCheckboxReserve();
      //删除所选中的数据
      this.$refs.tableList.removeCheckboxRow();
      this.selectionRows = [];
      this.selectedRowKeys = [];
      this.$refs.tableList.isAllChecked = false;
      this.row = {};
      this.tableData = [];
      this.$refs.tableList.query(this.queryInfo);
    },
    //刷新
    flushPage() {
      this.queryInfo.b0102 = "";
      this.queryInfo.manageAreas = [];
      this.init();
    },
    exportExcel() {
      this.$refs.tableList.exportData("处置人员配置信息",'csv');
    },
    //分配任务
    allotTaskBatch() {
      if (
          this.queryInfo.manageAreas == null ||
          this.queryInfo.manageAreas.length === 0
      ) {
        modal.warn({
          title: "提示",
          content: "请先选择管理区域并勾选(全选)点位后再批量分配人员",
        });
        return;
      }
      if (this.$refs.tableList.isAllChecked) {
        this.selectionRows=this.$refs.tableList.getCheckboxRecords()

      } else {
        this.selectionRows = this.$refs.tableList.getAllCheckboxRecords();
      }
      if (this.selectionRows.length === 0) {
        modal.warn({ title: "提示", content: "请先选择点位，再分配处置任务" });
        return;
      }
      this.row = {}; //批量分配时需要把单个的清空

      this.allotShowOrHide();
      setTimeout(() => {
        this.$refs.AllotTaskForm.initData(this.queryInfo.manageAreas);
      }, 50);
    },
    allotTask(row) {
      if (
          this.queryInfo.manageAreas == null ||
          this.queryInfo.manageAreas.length === 0
      ) {
        modal.warn({ title: "提示", content: "请先选择管理区域" });
        return;
      }
      this.row = row;
      this.allotShowOrHide();
      setTimeout(() => {
        this.$refs.AllotTaskForm.initData(this.queryInfo.manageAreas);
      }, 50);
    },
    columnChange() {
      this.$refs.tableList.refreshColumn();
    },
    //复选框事件(保留翻页选中的数据)
    selectChangeEvent({ checked, records, reserves, row }) {
      // console.log(checked ? '勾选事件' : '取消事件')
      // console.log('当前选中的数据：' + records)
      // console.log('翻页时其他页的数据：' + reserves)
      // console.log('当前选中的数据行：' + row )
      //勾选选中时
      if (checked) {
        //第一次选数据，还未进行翻页时
        if (reserves.length == 0) {
          this.selectedRowKeys = records.map((v) => v.b0101);
          this.selectionRows = records;
        } else {
          //b0101集合，翻页存在已选中的数据时,拼接新选中的数据
          this.selectedRowKeys = [
            ...reserves.map((v) => v.b0101),
            ...records.map((v) => v.b0101),
          ];
          //数据集合，翻页存在已选中的数据时,拼接新选中的数据
          this.selectionRows = [...reserves, ...records];
        }
      } else {
        //取消选中时
        let b0101Index = this.selectedRowKeys.indexOf(row.b0101);
        if (b0101Index > -1) {
          //删除取消选中删除指定元素b0101
          this.$delete(this.selectedRowKeys, b0101Index);
        }

        let dataIndex = null;
        for (let i = 0; i < this.selectionRows.length; i++) {
          if (this.selectionRows[i].b0101 == row.b0101) {
            dataIndex = i;
            break;
          }
        }
        //删除取消选中的元素整个对象
        this.$delete(this.selectionRows, dataIndex);
      }
    },
    //vxe复选框当前页全选中方法(保留翻页选中的数据)：
    selectAllEvent({ checked, records, reserves }) {
      // console.log(checked ? '勾选事件' : '取消事件')
      // console.log('当前选中的数据：' + records)
      // console.log('翻页时其他页的数据：' + reserves)
      //全选中时
      if (checked) {
        //第一次选数据，还未进行翻页时
        if (reserves.length == 0) {
          this.selectedRowKeys = records.map((v) => v.b0101);
          this.selectionRows = records;
        } else {
          //b0101集合，翻页存在已选中的数据时,拼接新选中的数据
          this.selectedRowKeys = [
            ...reserves.map((v) => v.b0101),
            ...records.map((v) => v.b0101),
          ];
          //数据集合，翻页存在已选中的数据时,拼接新选中的数据
          this.selectionRows = [...reserves, ...records];
        }
      } else {
        //取消全选时,直接将翻页数据赋值，当前页数据不用加上
        this.selectionRows = reserves;
        this.selectedRowKeys = reserves.map((v) => v.b0101);
      }
    },

    filterB0104NameMethod({ value, row, column }) {
      return row.b0104Name === value;
    },
    filterDisposalManMethod({ option, row }) {
      return row.disposalMan.includes(option.data);
    },
    filterDutyLeaderMethod({ option, row }) {
      return row.dutyLeader.includes(option.data);
    },
    filterDepartmentLeaderMethod({ option, row }) {
      return row.departmentLeader.includes(option.data);
    },
  },
};
</script>

<style lang="less" scoped>
.permission {
  //padding: 15px 20px 0;
  height: 100%;

  .desc,
  .operate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;

    > div {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
    }
  }

  .desc {
    margin-bottom: 20px;
  }

  .operate {
    margin-bottom: 15px;
    .field {
      flex: 0 0 auto;
      position: relative;
      margin-left: 15px;
      .field-box {
        position: absolute;
        top: 40px;
        left: 0;
        right: -40px;
        z-index: 99;
        border: 1px solid #2175a9;
        background: #002a44;
        border-radius: 5px;
        ul {
          padding: 10px;
          li {
            padding: 1px 0;
          }
        }
        .btn {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 5px;
          border-top: 1px solid #2175a9;
          color: #fff;
          p {
            flex: 1;
            text-align: center;
            cursor: pointer;
            &:hover {
              color: #49bbeb;
            }
          }
        }
      }
    }
  }
  .ep-table {
    height: calc(100% - 130px);
  }
}
</style>
